<template>
	<view class="min-h-[100vh] bg-background">
		<view class="p-[16rpx]">
			<view class="px-[20rpx] bg-white mb-[16rpx]" v-for="item in addressList" :key="item.id" @click="chooseAddress(item.id)">
				<view class="flex items-start py-[20rpx] border-b border-background">
					<view class="flex-shrink-0">
						<up-avatar :text="item.name[0]" size="80rpx"></up-avatar>
					</view>
					<view class="ml-[16rpx] flex-1">
						<view class="text-[28rpx]">
							<text class="mr-[8rpx]">{{ item.name }}</text>
							<text class="text-[26rpx] text-gray">{{ item.phone }}</text>
						</view>
						<view class="flex items-center mt-[8rpx]">
							<view class="text-[28rpx] flex-1">{{ item.province }} {{ item.city }} {{ item.area }} {{ item.addressDetail }}</view>
							<view class="w-[2rpx] h-[44rpx] bg-background mx-[20rpx]"></view>
							<up-icon name="edit-pen" size="40rpx" @click="toAddAddress(item)"></up-icon>
						</view>
					</view>
				</view>
				<view class="flex items-center justify-between py-[24rpx] text-[24rpx]">
					<view class="flex items-center">
						<view class="" @click="setDefaul(item)">
							<up-image :src="check" v-if="!item.isDefault" width="28rpx" height="28rpx"></up-image>
							<up-image :src="checked" v-else width="28rpx" height="28rpx"></up-image>
						</view>
						<view class="text-gray ml-[12rpx]">默认地址</view>
					</view>
					<view class="text-[#555]" @click="delAddress(item.id)">删除</view>
				</view>
			</view>
			<view class="px-[20rpx] py-[30rpx] bg-white flex items-center justify-between" @click="getWxAddress">
				<view class="text-[28rpx]">获取微信收货地址</view>
				<up-icon name="arrow-right" size="36rpx"></up-icon>
			</view>
			<view class="px-[20rpx] mt-[40rpx]">
				<view class="add" @click="toAddAddress(0)">
					<image class="w-[32rpx] h-[32rpx]" src="../../static/addAddress.png" mode="widthFix"></image>
					<view class="text-[28rpx] ml-[12rpx]">添加地址</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onShow, onLoad } from '@dcloudio/uni-app';
import useAddress from '@/hooks/useAddress';
import check from '@/static/check.png';
import checked from '@/static/checked.png';
import { ref } from 'vue';
const isChoose = ref(0);
onLoad((option) => {
	isChoose.value = option.isChoose;
});
onShow(() => {
	getAddressList();
});
const { addressList, getWxAddress, getAddressList, delAddress, setDefaultAddress } = useAddress();
const setDefaul = async (item) => {
	item.isDefault = !item.isDefault;
	await setDefaultAddress(item);
};
const chooseAddress = (id) => {
	console.log(isChoose.value);
	if (isChoose.value !== '1') {
		return;
	}
	uni.$emit('chooseAddress', id);
	uni.navigateBack();
};
const toAddAddress = (address) => {
	uni.navigateTo({
		url: `/pages/editAddress/editAddress?address=${JSON.stringify(address)}`
	});
};
</script>

<style scoped lang="scss">
.add {
	@apply flex items-center justify-center py-[14rpx] border border-dashed border-[#ccc] rounded-[8rpx] text-[#ccc];
}
</style>
